<template>
  <!-- 专题标签 -->
  <div class="special-tag" v-if="specialList.length > 0">
    <h3>热门专题</h3>
    <div class="tag-box">
      <van-tag plain type="warning" v-for="item in specialList" :key="item.id">
        {{ item.title }}
      </van-tag>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["specialList"]),
  },
  created() {
    // 检测vuex中是否存在标签数据，不存在则通知ACTIONS中的方法执行
    if (this.specialList.length === 0) {
      this.querySpecialDataAsync();
    }
  },
  methods: {
    ...mapActions(["querySpecialDataAsync"]),
  },
};
</script>

<style lang="less" scoped>
.special-tag {
  padding: 10px 15px;
  padding-bottom: 0;
  background: #fff;

  h3 {
    font-size: 14px;
    color: #545454;
    font-weight: 700;
    line-height: 30px;
  }

  .tag-box {
    margin-top: 5px;
    .van-tag {
      margin-right: 12px;
      margin-bottom: 10px;
      padding: 4px 13px;
      border-radius: 4px;
      font-size: 14px;
    }
  }
}
</style>